<template>
    <div>
        <div id="container"></div>
    </div>
</template>
<script>
import G6 from '@antv/g6';
import { init } from 'echarts';
export default {
    name: 'g6Index',
    data() {
        return {
            nodes: [
                {
                    id: 'node1', // 节点的唯一标识
                    x: 100, // 节点横坐标
                    y: 200, // 节点纵坐标
                    label: '起始点', // 节点文本
                    type: 'rect',
                },
                {
                    id: 'node2',
                    x: 300,
                    y: 200,
                    label: '目标点',
                },
            ],
            edges: [
                {
                    source: 'node1', // 起始点 id
                    target: 'node2', // 目标点 id
                    label: '我是连线', // 边的文本
                }
            ],
            options: {
                container: 'container',
                width: 500,
                height: 500,
                defaultNode: {
                    type: 'circle',
                    size: [100],
                    color: '#5B8FF9',
                    style: {
                        fill: '#9EC9FF',
                        lineWidth: 3,
                    },
                    labelCfg: {
                        style: {
                            fill: '#fff',
                            fontSize: 20,
                        },
                    },
                },
                // defaultNode: {
                //     size: 30, // 节点大小
                //     // 节点样式配置
                //     style: {
                //         fill: 'red', // 节点填充色
                //         stroke: 'blue', // 节点描边色
                //         lineWidth: 3, // 节点描边粗细
                //     },
                //     // 节点上的标签文本配置
                //     labelCfg: {
                //         // 节点上的标签文本样式配置
                //         style: {
                //             fill: '#000', // 节点标签文字颜色
                //         },
                //     },
                // },
                defaultEdge: {
                    style: {
                        stroke: '#e2e2e2',
                    },
                },
            }
        }
    },
    mounted() {
        this.init()
    },
    methods: {
        init() {
            const data = {
                nodes: this.nodes,
                edges: this.edges
            };

            const graph = new G6.Graph(this.options);
            graph.data(data);
            graph.render();
        }
    }
}
</script>
